<template>
	<view class="tj">
		<view class="sq flex">
			<scroll-view scroll-x class="sq-scroll">
				<view class="sq-list">
					<view :class="['sq-item', item.province == province ? 'select' : '']" v-for="(item, index) in cityList" :key="index" @click="setProvince(item.province)">
						{{ item.province }}
					</view>
				</view>
			</scroll-view>
			<view class="icon flex align-center justify-center" @click="tp">
				<text class="wlIcon-search"></text>
			</view>
		</view>

		<view class="swiper">
			<view class="one" v-if="q3[0]" @tap="$wanlshop.on('/pages/xiangqing/xiangqing?id=' + q3[0].id)">
				<view class="bb">
					<image class="img" :src="q3[0].images_list[0]" mode=""></image>
					<view class="t">{{ q3[0].realname }}</view>
					<view class="x">{{ +q3[0].price }}票</view>
				</view>
			</view>
			<view class="one two" v-if="q3[1]" @tap="$wanlshop.on('/pages/xiangqing/xiangqing?id=' + q3[1].id)">
				<view class="bb">
					<image class="img" :src="q3[1].images_list[0]" mode=""></image>
					<view class="t">{{ q3[1].realname }}</view>
					<view class="x">{{ +q3[1].price }}票</view>
				</view>
			</view>
			<view class="one three" v-if="q3[2]" @tap="$wanlshop.on('/pages/xiangqing/xiangqing?id=' + q3[2].id)">
				<view class="bb">
					<image class="img" :src="q3[2].images_list[0]" mode=""></image>
					<view class="t">{{ q3[2].realname }}</view>
					<view class="x">{{ +q3[2].price }}票</view>
				</view>
			</view>
		</view>
		<view class="phb-box">
			<view class="phb-title flex align-center justify-center text-center">
				<view class="flex-sub">排名</view>
				<view class="flex-sub">编号</view>
				<view class="flex-twice">选手</view>
				<view class="flex-sub">票数</view>
			</view>
			<view
				class="phb-list flex align-center justify-around"
				v-for="(item, index) in userList"
				:key="index"
				@tap="$wanlshop.on('/pages/xiangqing/xiangqing?id=' + item.id)"
			>
				<view class="flex-sub text-center mc">
					{{ index + 4 }}
				</view>
				<view class="flex-sub text-center">{{ item.code }}</view>
				<view class="flex-twice user flex align-center justify-center">
					<image class="tx" :src="item.images_list[0]"></image>
					<view class="name">{{ item.realname }}</view>
				</view>
				<view class="flex-sub text-center ps">{{ +item.price }}</view>
			</view>
		</view>
		<uni-popup style="z-index: 999; height: auto" ref="popup" type="bottom" :is-mask-click="false">
			<view class="popup-content">
				<view class="flex justify-between align-center">
					<view class="title">筛选赛区</view>
					<view class="close" @click="close">x</view>
				</view>
				<scroll-view scroll-y="true" class="city-box">
					<t-city @setProvince="setProvince" @searchCity="searchCity" />
				</scroll-view>
			</view>
		</uni-popup>

<!-- 		<view class="bottom text-center" v-if="!user">
			<text class="pink">您还不是选手~</text>
		</view>
		<view class="bottom" v-else-if="rankData.rank != 0 && !!user">
			<template>
				<view class="">
					<image class="tx" :src="user.images_list[0]"></image>
					<view class="name">{{ user.realname }}</view>
				</view>
						
				<view class="p">{{ user.vote }}</view>
				<view class="pm">
					<text>{{ rankData.rank }}</text>
					名
				</view>
			</template>
		</view> -->
	</view>
</template>

<script>
import TCity from '@/components/t-city.vue';

export default {
	components: { TCity },
	async onLoad() {
		this.user = uni.getStorageSync('wanlshop:user')
		// await this.getCompetitor()
		
		await this.getCityList();
		this.getUserList('first');
		// this.getMyRankNum()
	},
	data() {
		return {
			user: {},
			type: 0,
			title: '',
			province: '', //赛区index
			cityList: [],
			userList: [],
			list: [],
			q3: [],
			rankData: {},
			pages: 1,
			keyword: '',
			loading: false,
			originlListData: [],
			last_page: 1
		};
	},
	computed: {
		// q3() {
		// 	return this.userList.slice(0, 3);
		// }
	},
	onReachBottom() {
		if (this.loading) {
			this.pages++;
			this.getUserList();
		}
	},
	methods: {
		tp() {
			this.$refs.popup.open('bottom');
		},
		close() {
			this.$refs.popup.close();
		},

		getUserList(type) {
			let _this = this
			let province = this.province == '中国' ? '' : this.province;
			uni.request({
				url: `/wanlshop/activity/Index/getranking?keyword=${_this.keyword}&province=${province}&page=${_this.pages}&activity_id=1`,
				method: 'GET',
				success: (res) => {
					console.log(res.data.data);
					res.data.data = res.data.data.map(item => {
						const img0 = item.images_list[0] + '?x-oss-process=image/resize,m_mfit,w_200,h_200/crop,w_200,h_200' || ''
						item.images_list[0] = img0
						return {
							...item
						}
					})
					_this.last_page = res.data.last_page
					if (_this.last_page > _this.pages) {
						_this.loading = true;
					} else {
						_this.loading = false;
					}
					if(type == 'first') {
						_this.originlListData = res.data.data
						_this.title = res.data.title;
						_this.q3 = res.data.data.slice(0, 3);
						_this.userList = res.data.data.slice(3);
					} else {
						_this.userList =  [..._this.userList, ...res.data.data]
					}

					

					console.log(1111, _this.q3, _this.userList);
				}
			});
		},
		async getMyRankNum() {
			await uni.request({
				url: `/wanlshop/activity/Index/getMyRankNum?activity_id=` + this.user.id,
				method: 'GET',
				success: (res) => {
					console.log(this.user)
					console.log(res)
					
					this.rankData = res.data
				}
			});
		},
		async getCompetitor() {
			await uni.request({
				url: '/wanlshop/activity/Index/getplayerDetail?id=' + this.user.id,
				method: 'GET',
				success: (res) => {
					this.user = res.data
					
				}
			});
		},
		async getCityList() {
			let [err, res] = await uni.request({
				url: `/wanlshop/activity/Index/cityList` ,
				method: 'GET'
			});
			this.province = res.data?.[0]?.['province'];
			this.cityList = res.data;
		},
		/**
		 *
		 * 切换赛区
		 */
		setProvince(value) {
			this.province = value;
			this.pages = 1;
			this.userList = [];
			this.getUserList();
			this.close();
		},
		searchCity(value) {
			this.keyword = value;
			this.pages = 1;
			this.userList = [];
			this.getUserList();
			this.close();
		}
	}
};
</script>

<style lang="scss" scoped>
.tj {
	box-sizing: border-box;
	min-height: 100vh;
	background: linear-gradient(135deg, #d39ef7 0%, #ebcdff 22%, #ebedfa 59%, #e1dcf9 100%);
	position: relative;
	z-index: 99;
	padding-bottom: 120rpx;
	.sq {
		z-index: 1;
		top: 50rpx;
		position: absolute;
		// margin-left: 24rpx;
		width: 96%;
		margin-left: 28rpx;
		border-radius: 200rpx 0 0 200rpx;
		.icon {
			color: #fff;
			width: 100%;
			background: linear-gradient(90deg, rgba(97, 68, 251, 0.5) 0%, rgba(170, 40, 248, 0.5) 100%);
			border-radius: 10rpx 0rpx 0rpx 10rpx;
			font-size: 40rpx;
		}

		.sq-scroll {
			width: 92%;
		}
		.sq-list {
			width: 999rpx;
			display: flex;
		}
		.sq-item {
			display: inline-block;
			margin-right: 20rpx;
			font-size: 28rpx;
			font-weight: 500;
			letter-spacing: 1.4rpx;
			color: #261332;
			overflow: hidden;
			padding: 14rpx 0;
			flex: 0 0 auto;
			width: 144rpx;
			text-align: center;
			&.select {
				background: linear-gradient(105deg, #ff6dc4 0%, #e994ff 100%);
				border-radius: 200rpx;
				color: #ffffff;
			}
		}
	}
	.swiper {
		position: relative;
		width: 750rpx;
		height: 750rpx;
		background: url('../../static/images/phb/bj.png') no-repeat 0 0 / cover;
		.two {
			bottom: 380rpx !important;
			left: 70rpx !important;
			.bb {
				background: url('../../static/images/index/index_avat2.png') no-repeat center / cover !important;
			}
		}
		.three {
			bottom: 380rpx !important;
			left: 510rpx !important;
			.bb {
				background: url('../../static/images/index/index_avat3.png') no-repeat center / cover !important;
			}
		}
		.one {
			position: absolute;
			bottom: 460rpx;
			left: 290rpx;
			.bb {
				width: 162rpx;
				height: 174rpx;
				background: url('../../static/images/index/index_avat1.png') no-repeat center / cover;
			}
			.img {
				margin-top: 30rpx;
				margin-left: 8rpx;
				border-radius: 50%;
				width: 142rpx;
				height: 142rpx;
			}
			.t {
				margin-top: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #261332;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.x {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #ec5bff;
				line-height: 40rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}
	.title-box {
		padding: 100rpx 50rpx 0 20rpx;
		.title-text {
			/** 文本1 */
			font-size: 26rpx;
			font-weight: 500;
			letter-spacing: 1.3rpx;
			line-height: 36.4rpx;
			color: rgba(255, 255, 255, 1);
			text-overflow: ellipsis;
			overflow: hidden;
			word-break: break-all;
			white-space: nowrap;
			width: 15em;
		}
		.title-phb {
			padding-top: 30rpx;
			/** 文本1 */
			font-size: 72rpx;
			font-weight: 700;
			letter-spacing: 3.6rpx;
			line-height: 100.8rpx;
			color: rgba(255, 255, 255, 1);
		}
		.title-image {
			width: 300rpx;
		}
	}
	.phb-box {
		position: relative;
		z-index: 999;
		margin: 0 auto;
		width: 700rpx;
		opacity: 1;
		border-radius: 40rpx;
		padding: 40rpx;
		margin-top: -40rpx;
		background: url('../../static/images/phb/bg.png') no-repeat -36rpx -24rpx/110%, #fff;
		.w-25 {
			width: 25%;
			text-align: center;
		}
		.phb-title {
			height: 60rpx;
			font-size: 26rpx;
			font-weight: 500;
			letter-spacing: 1.3rpx;
			color: #2c2e3b;
			background: rgba(233, 206, 249, 0.38);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
		.phb-list {
			font-size: 26rpx;
			font-weight: 900;
			letter-spacing: 1.3rpx;
			line-height: 36.4rpx;
			color: #261332;
			padding: 30rpx 0;

			&:last-child {
				border-radius: 0 0 10rpx 10rpx;
			}

			.mc {
				color: #b26dbb;
				.mc-image {
					width: 44rpx;
					height: 45.36rpx;
				}
			}
			.ps {
				color: #f061fb;
			}
			.user {
				display: flex;
				justify-content: left;
				align-items: center;
				margin-left: 60rpx;
				.tx {
					width: 60rpx;
					height: 60rpx;
					padding: 4rpx;
					border-radius: 50%;
					background: linear-gradient(
						180deg,
						rgba(255, 186.67405754327774, 199.8984271287918, 1),
						rgba(114.0000008046627, 236.00000113248825, 241.00000083446503, 0.5299999713897705)
					);
					border-radius: 50%;
					margin-right: 5rpx;
				}
			}
		}
	}
}

.popup-content {
	background-color: #fff;
	padding: 26rpx;
	.title {
		color: #fff;
	}
	.close {
		text-align: right;
		font-size: 30rpx;
		padding: 10rpx;
		color: #fff;
	}
	.city-box {
		height: 60vh;
	}
}
.bottom {
	z-index: 999;
	position: fixed;
	bottom: 50px;
	width: 750rpx;
	height: 118rpx;
	padding: 30rpx;
	background: url('../../static/images/phb/bottom.png') no-repeat -42rpx -70rpx / 854rpx 272rpx;
	.tx {
		width: 88rpx;
		height: 88rpx;
		padding: 4rpx;
		border-radius: 50%;
		background: linear-gradient(
			180deg,
			rgba(255, 186.67405754327774, 199.8984271287918, 1),
			rgba(114.0000008046627, 236.00000113248825, 241.00000083446503, 0.5299999713897705)
		);
		border-radius: 50%;
		margin-right: 5rpx;
	}
}

/deep/ .phb-list .user .tx>div {
	border-radius: 50%;
}

.pink {
	font-size: 28rpx;
	color: #F061FB;
}
</style>
